<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
const $router = useRouter();
const props = defineProps({
  title: {
    type: String,
    default: ""
  }
});
const goBack = () => {
  $router.back();
};
</script>

<template>
  <div
    class="nav-bar"
    w:w="screen"
    w:flex="~ nowrap"
    w:align="items-center"
    w:bg="gray-300"
    w:text="center gray-800"
  >
    <div
      class="arrow iconfont icon-arrow-left"
      w:m="x-8"
      w:text="4xl"
      @click="goBack"
    />
    <div class="title" w:flex="1" w:text="4xl">
      {{ props.title }}
    </div>
    <div class="action" w:w="w-20" />
  </div>
</template>

<style lang="scss" scoped>
.nav-bar {
  height: 88px;
}
</style>
